<?php
// Posts are found
if ($posts->have_posts()) {
    $n = 1;
    echo '<div class="products-wrapper" id="snacks-list"><div class="row">';
    while ($posts->have_posts()):

        $posts->the_post();
        global $post;
        ?>

			<?php
				$thumb_id = get_post_thumbnail_id($post->ID);
				$image_url = wp_get_attachment_url($thumb_id);
				if ($n == '1' || $n == '3') {
					$article_layout = 'full-article';
				} else {
					$article_layout = 'grid-article';
				}
				$image_vals = aq_resize($image_url, 560, 400, true);
				
				if (!$image_vals) {
					$image_vals = aq_resize(PLACEHOLDER, 560, 400, true);
				}

				$n++;
			?>

			<div class="col-xs-12 col-mo-6 isotope-item">

				<article class="<?php echo $article_layout;?>">
					<div class="img-wrapper">
						<img src="<?php echo $image_vals; ?>" />
					</div>
					<div class="type-info <?php echo get_field('font_color'); ?>">
						<h4><?php the_title();?></h4>
						<div class="product-content">
							<?php echo get_the_content(); ?>
						</div>
					</div>
				</article>
			</div>

		<?php

    endwhile;
	echo '</div></div>';
}
// Posts not found
else {
        echo '<h4>' . __('暂无产品', 'shortcodes-ultimate') . '</h4>';
    }
    ?>

	<script>
		jQuery(window).load(function () {
			jQuery('#snacks-list').isotope({
				layoutMode: 'packery',
				itemSelector : '.isotope-item'
			});
		})
	</script>